import $ from 'jQuery';
(function () {
    let $vue = new Vue({
        el: '.alarm-info-char-main-hook',
        data: {
            account:{
                'palletCirculation':'',//流转状态
                'palletNonCirculation':'',//非流转状态
            },
            companyId:'',
            companyList: []
        },
        methods: {
            // 上一页
            changeReport:function () {
                M.Page.emitPrePage();
            },
            // 触发刷新页(当前显示的页面)
            refreshPage: function () {
                M.Page.refreshPage(this.boxs);
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('myChart'));
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '告警数量',
                        x : 'center',
                        y : 'top',
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '18',
                            color:'rgba(81,88,114)',
                            fontWeight : 'normal'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                        },
                    legend: {
                        width:700,
                        height:10,
                        itemWidth:27,
                        itemHeight:10,
                        itemGap:24,
                        formatter: function( name ) {
                            return '{a|' + name + '}';
                        },
                        textStyle: {
                            rich:{
                                a: {
                                    width: 100
                                }
                            },
                            fontFamily:'Microsoft YaHei',
                            fontSize: '14',
                            color:'rgba(81,88,114)',
                            fontWeight : 'normal'
                        },
                        x : 'center',
                        y : 'bottom',
                        data: ['电容故障','电源故障','继电器故障','保险丝故障','存储芯片故障','时钟芯片故障','读卡模块故障','内部参数配置故障','漏电报警','防盗报警','水浸报警','电流过大报警','功率过大报警','功率过小报警','其它']
                    },
                    color:['rgb(28,109,156)','rgb(16,166,199)','rgb(178,139,0)','rgb(206,80,42)','rgb(255,161,91)','rgb(73,156,146)',
                        'rgb(145,199,175)','rgb(153,109,220)','rgb(109,128,223)','rgb(199,99,101)','rgb(119,45,132)','rgb(134,198,200)','rgb(163,206,112)','rgb(155,144,124)','rgb(180,179,177)'],
                    series : [
                        {
                            name: '告警数量',
                            type: 'pie',
                            radius: ['35%', '55%'],
                            center: ['50%', '40%'],
                            data:[
                                {value:this.account.palletNonCirculation, name:'电容故障'},
                                {value:this.account.palletCirculation, name:'电源故障'},
                                {value:this.account.palletNonCirculation, name:'继电器故障'},
                                {value:this.account.palletCirculation, name:'保险丝故障'},
                                {value:this.account.palletNonCirculation, name:'存储芯片故障'},
                                {value:this.account.palletCirculation, name:'时钟芯片故障'},
                                {value:this.account.palletNonCirculation, name:'读卡模块故障'},
                                {value:this.account.palletCirculation, name:'内部参数配置故障'},
                                {value:this.account.palletNonCirculation, name:'漏电报警'},
                                {value:this.account.palletCirculation, name:'防盗报警'},
                                {value:this.account.palletNonCirculation, name:'水浸报警'},
                                {value:this.account.palletCirculation, name:'电流过大报警'},
                                {value:this.account.palletNonCirculation, name:'功率过大报警'},
                                {value:this.account.palletCirculation, name:'功率过小报警'},
                                {value:this.account.palletNonCirculation, name:'其它'},
                            ],
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : false,
                                        position : 'center',
                                        textStyle : {
                                            fontSize : '30',
                                            fontWeight : 'bold'
                                        }
                                    }
                                }
                            },
                        }
                    ]
                });
                window.onresize = myChart.resize;
                $("#Download1").click(function() {
                    setTimeout(function () {
                        var i = myChart.getDataURL({
                            type:'png',
                            backgroundColor:'white'
                            // 导出的图片分辨率比例，默认为 1。
                            //pixelRatio: number,
                        });
                        $(this).attr("href",i);
                        $(this).attr("download","test.png");
                    },5000)
                    var picBase64Info = myChart.getDataURL();
                    $(".showImg1").html('<img src="'+picBase64Info+'"/>')
                });
            },
            drawLine2() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart2'));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '告警数量统计',
                        x : 'center',
                        y : 'top',
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '18',
                            color:'rgba(81,88,114)',
                            fontWeight : 'normal'
                        }
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        /*data:['故障A','故障B','故障C'],*/
                        data:[{
                            name:'故障A',
                            icon:'stack'
                             },
                            {
                                name:'故障B',
                                icon:'stack'
                            },
                            {
                                name:'故障C',
                                icon:'stack'
                            }
                        ],
                        x : 'center',
                        y : 'bottom',
                        itemWidth:27,
                        itemHeight:10,
                        itemGap:24,
                        textStyle: {
                            fontFamily:'Microsoft YaHei',
                            fontSize: '14',
                            color:'rgba(81,88,114)',
                            fontWeight : 'normal'
                        },
                    },
                    toolbox: {
                        feature: {
                        }
                    },
                    grid: {
                        top:'10%',
                        left: '3%',
                        right: '4%',
                        bottom: '7%',
                        containLabel: true
                    },
                    color:['rgb(207,109,106)','rgb(116,204,226)','rgb(173,212,193)'],
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['12-01','12-02','12-03']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'故障A',
                            type:'line',
                            stack: '总量',
                            itemStyle: {normal: {areaStyle: {type: 'default',color:'rgb(207,109,106)'}}},
                            data:[12346,135457,156441]
                        },
                        {
                            name:'故障B',
                            type:'line',
                            stack: '总量',
                            itemStyle: {normal: {areaStyle: {type: 'default',color:'rgb(116,204,226)'}}},
                            data:[123214,254789,126547]
                        },
                        {
                            name:'故障C',
                            type:'line',
                            stack: '总量',
                            itemStyle: {normal: {areaStyle: {type: 'default',color:'rgb(173,212,193)'}}},
                            data:[147147,258258,369369]
                        },
                    ]
                });
                window.onresize = myChart.resize;
            },
        },
        created: function () {
            IOT.getServerData(URI.REPORT.ALARM_INFO.INFO_CHAR.CHAR, {}, (ret) => {
                if (ret.code === 200) {
                    this.account = $.extend({}, this.account, ret.data);
                    this.drawLine();
                    this.drawLine2();
                } else {
                    IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                }
            });
        },
        mounted: function () {
            this.drawLine();
            this.drawLine2();
            this.$nextTick(() => {
            });
        }
    });
})();